<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>志愿者活动管理系统</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.15.19/dist/css/uikit.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/uikit@3.15.19/dist/js/uikit.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/uikit@3.15.19/dist/js/uikit-icons.min.js"></script>
    <style>
        body {
            display: flex;
        }

        .sidebar {
            width: 200px;
            height: 100vh;
            background-color: #f8f9fa;
            padding-top: 20px;
        }

        .sidebar a {
            display: block;
            padding: 10px 20px;
            color: #333;
            text-decoration: none;
        }

        .sidebar a.uk-active {
            background-color: #e9ecef;
        }

        .main-content {
            flex: 1;
            padding: 20px;
        }
    </style>
</head>

<body>
    <div class="sidebar">
        <a href="#" class="uk-active" onclick="openTab('volunteer')">志愿者管理</a>
        <a href="#" onclick="openTab('activity')">活动管理</a>
        <a href="#" onclick="openTab('registration')">报名管理</a>
        <a href="#" onclick="openTab('evaluation')">评价管理</a>
        <a href="#" onclick="openTab('reward')">奖励管理</a>
    </div>
    <div class="main-content">
        <h1>志愿者活动管理系统</h1>
        <!-- 志愿者管理 -->
        <div id="volunteer" class="uk-tab-content">
            <h2>志愿者管理</h2>
            <input type="text" id="volunteerSearch" placeholder="搜索志愿者姓名" oninput="searchVolunteers()">
            <button class="uk-button uk-button-primary" onclick="openAddVolunteerModal()">添加志愿者</button>
            <table id="volunteerTable" class="uk-table uk-table-striped">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>姓名</th>
                        <th>联系方式</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <!-- 活动管理 -->
        <div id="activity" class="uk-tab-content" style="display: none;">
            <h2>活动管理</h2>
            <input type="text" id="activitySearch" placeholder="搜索活动名称" oninput="searchActivities()">
            <button class="uk-button uk-button-primary" onclick="openAddActivityModal()">添加活动</button>
            <table id="activityTable" class="uk-table uk-table-striped">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>活动名称</th>
                        <th>活动时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <!-- 报名管理 -->
        <div id="registration" class="uk-tab-content" style="display: none;">
            <h2>报名管理</h2>
            <input type="text" id="registrationSearch" placeholder="搜索报名信息" oninput="searchRegistrations()">
            <button class="uk-button uk-button-primary" onclick="openAddRegistrationModal()">添加报名信息</button>
            <table id="registrationTable" class="uk-table uk-table-striped">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>志愿者姓名</th>
                        <th>活动名称</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <!-- 评价管理 -->
        <div id="evaluation" class="uk-tab-content" style="display: none;">
            <h2>评价管理</h2>
            <input type="text" id="evaluationSearch" placeholder="搜索评价信息" oninput="searchEvaluations()">
            <button class="uk-button uk-button-primary" onclick="openAddEvaluationModal()">添加评价信息</button>
            <table id="evaluationTable" class="uk-table uk-table-striped">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>志愿者姓名</th>
                        <th>评价内容</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <!-- 奖励管理 -->
        <div id="reward" class="uk-tab-content" style="display: none;">
            <h2>奖励管理</h2>
            <input type="text" id="rewardSearch" placeholder="搜索奖励信息" oninput="searchRewards()">
            <button class="uk-button uk-button-primary" onclick="openAddRewardModal()">添加奖励信息</button>
            <table id="rewardTable" class="uk-table uk-table-striped">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>志愿者姓名</th>
                        <th>奖励内容</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>

    <!-- 志愿者添加/编辑模态框 -->
    <div id="volunteerModal" uk-modal>
        <div class="uk-modal-dialog uk-modal-body">
            <h2 class="uk-modal-title">添加/编辑志愿者</h2>
            <input type="hidden" id="volunteerId">
            <label for="volunteerName">姓名</label>
            <input type="text" id="volunteerName" class="uk-input">
            <label for="volunteerContact">联系方式</label>
            <input type="text" id="volunteerContact" class="uk-input">
            <p class="uk-text-right">
                <button class="uk-button uk-button-default uk-modal-close" type="button">关闭</button>
                <button class="uk-button uk-button-primary" onclick="saveVolunteer()">保存</button>
            </p>
        </div>
    </div>

    <!-- 活动添加/编辑模态框 -->
    <div id="activityModal" uk-modal>
        <div class="uk-modal-dialog uk-modal-body">
            <h2 class="uk-modal-title">添加/编辑活动</h2>
            <input type="hidden" id="activityId">
            <label for="activityName">活动名称</label>
            <input type="text" id="activityName" class="uk-input">
            <label for="activityTime">活动时间</label>
            <input type="text" id="activityTime" class="uk-input">
            <p class="uk-text-right">
                <button class="uk-button uk-button-default uk-modal-close" type="button">关闭</button>
                <button class="uk-button uk-button-primary" onclick="saveActivity()">保存</button>
            </p>
        </div>
    </div>

    <!-- 报名添加/编辑模态框 -->
    <div id="registrationModal" uk-modal>
        <div class="uk-modal-dialog uk-modal-body">
            <h2 class="uk-modal-title">添加/编辑报名信息</h2>
            <input type="hidden" id="registrationId">
            <label for="registrationVolunteer">志愿者姓名</label>
            <input type="text" id="registrationVolunteer" class="uk-input">
            <label for="registrationActivity">活动名称</label>
            <input type="text" id="registrationActivity" class="uk-input">
            <p class="uk-text-right">
                <button class="uk-button uk-button-default uk-modal-close" type="button">关闭</button>
                <button class="uk-button uk-button-primary" onclick="saveRegistration()">保存</button>
            </p>
        </div>
    </div>

    <!-- 评价添加/编辑模态框 -->
    <div id="evaluationModal" uk-modal>
        <div class="uk-modal-dialog uk-modal-body">
            <h2 class="uk-modal-title">添加/编辑评价信息</h2>
            <input type="hidden" id="evaluationId">
            <label for="evaluationVolunteer">志愿者姓名</label>
            <input type="text" id="evaluationVolunteer" class="uk-input">
            <label for="evaluationContent">评价内容</label>
            <input type="text" id="evaluationContent" class="uk-input">
            <p class="uk-text-right">
                <button class="uk-button uk-button-default uk-modal-close" type="button">关闭</button>
                <button class="uk-button uk-button-primary" onclick="saveEvaluation()">保存</button>
            </p>
        </div>
    </div>

    <!-- 奖励添加/编辑模态框 -->
    <div id="rewardModal" uk-modal>
        <div class="uk-modal-dialog uk-modal-body">
            <h2 class="uk-modal-title">添加/编辑奖励信息</h2>
            <input type="hidden" id="rewardId">
            <label for="rewardVolunteer">志愿者姓名</label>
            <input type="text" id="rewardVolunteer" class="uk-input">
            <label for="rewardContent">奖励内容</label>
            <input type="text" id="rewardContent" class="uk-input">
            <p class="uk-text-right">
                <button class="uk-button uk-button-default uk-modal-close" type="button">关闭</button>
                <button class="uk-button uk-button-primary" onclick="saveReward()">保存</button>
            </p>
        </div>
    </div>

    <script>
        // 初始化表格和数据
        function init() {
            initVolunteers();
            initActivities();
            initRegistrations();
            initEvaluations();
            initRewards();
        }

        // 打开 tab 页面
        function openTab(tabName) {
            let tabContents = document.querySelectorAll('.uk-tab-content');
            tabContents.forEach(content => {
                content.style.display = 'none';
            });
            let sidebarLinks = document.querySelectorAll('.sidebar a');
            sidebarLinks.forEach(link => {
                link.classList.remove('uk-active');
            });
            document.getElementById(tabName).style.display = 'block';
            document.querySelector(`.sidebar a[onclick="openTab('${tabName}')"]`).classList.add('uk-active');
        }

        // 志愿者管理
        function initVolunteers() {
            let volunteers = JSON.parse(localStorage.getItem('volunteers')) || [
                { id: 1, name: '张三', contact: '13800138000' },
                { id: 2, name: '李四', contact: '13900139000' },
                { id: 3, name: '王五', contact: '13700137000' },
                { id: 4, name: '赵六', contact: '13600136000' },
                { id: 5, name: '孙七', contact: '13500135000' },
                { id: 6, name: '周八', contact: '13400134000' },
                { id: 7, name: '吴九', contact: '13300133000' },
                { id: 8, name: '郑十', contact: '13200132000' },
                { id: 9, name: '王十一', contact: '13100131000' },
                { id: 10, name: '李十二', contact: '13000130000' }
            ];
            localStorage.setItem('volunteers', JSON.stringify(volunteers));
            renderVolunteers(volunteers);
        }

        function renderVolunteers(volunteers) {
            let volunteerTable = document.getElementById('volunteerTable').getElementsByTagName('tbody')[0];
            volunteerTable.innerHTML = '';
            volunteers.forEach(volunteer => {
                let row = volunteerTable.insertRow();
                row.insertCell(0).textContent = volunteer.id;
                row.insertCell(1).textContent = volunteer.name;
                row.insertCell(2).textContent = volunteer.contact;
                let actionsCell = row.insertCell(3);
                actionsCell.innerHTML = `<button class="uk-button uk-button-warning" onclick="openEditVolunteerModal(${volunteer.id})">编辑</button>
                                         <button class="uk-button uk-button-danger" onclick="deleteVolunteer(${volunteer.id})">删除</button>`;
            });
        }

        function searchVolunteers() {
            let searchTerm = document.getElementById('volunteerSearch').value.toLowerCase();
            let volunteers = JSON.parse(localStorage.getItem('volunteers'));
            let filteredVolunteers = volunteers.filter(volunteer => {
                return volunteer.name.toLowerCase().includes(searchTerm);
            });
            renderVolunteers(filteredVolunteers);
        }

        function openAddVolunteerModal() {
            document.getElementById('volunteerId').value = '';
            document.getElementById('volunteerName').value = '';
            document.getElementById('volunteerContact').value = '';
            UIkit.modal('#volunteerModal').show();
        }

        function openEditVolunteerModal(id) {
            let volunteers = JSON.parse(localStorage.getItem('volunteers'));
            let volunteer = volunteers.find(v => v.id === id);
            document.getElementById('volunteerId').value = volunteer.id;
            document.getElementById('volunteerName').value = volunteer.name;
            document.getElementById('volunteerContact').value = volunteer.contact;
            UIkit.modal('#volunteerModal').show();
        }

        function saveVolunteer() {
            let id = document.getElementById('volunteerId').value;
            let name = document.getElementById('volunteerName').value;
            let contact = document.getElementById('volunteerContact').value;
            let volunteers = JSON.parse(localStorage.getItem('volunteers'));
            if (id) {
                let index = volunteers.findIndex(v => v.id === parseInt(id));
                volunteers[index] = { id: parseInt(id), name, contact };
            } else {
                let newId = volunteers.length > 0 ? Math.max(...volunteers.map(v => v.id)) + 1 : 1;
                volunteers.push({ id: newId, name, contact });
            }
            localStorage.setItem('volunteers', JSON.stringify(volunteers));
            renderVolunteers(volunteers);
            UIkit.modal('#volunteerModal').hide();
        }

        function deleteVolunteer(id) {
            let volunteers = JSON.parse(localStorage.getItem('volunteers'));
            let newVolunteers = volunteers.filter(v => v.id !== id);
            localStorage.setItem('volunteers', JSON.stringify(newVolunteers));
            renderVolunteers(newVolunteers);
        }

        // 活动管理
        function initActivities() {
            let activities = JSON.parse(localStorage.getItem('activities')) || [
                { id: 1, name: '环保活动', time: '2025-01-01' },
                { id: 2, name: '敬老活动', time: '2025-02-01' },
                { id: 3, name: '助残活动', time: '2025-03-01' },
                { id: 4, name: '助学活动', time: '2025-04-01' },
                { id: 5, name: '公益演出', time: '2025-05-01' },
                { id: 6, name: '社区服务', time: '2025-06-01' },
                { id: 7, name: '文化传承', time: '2025-07-01' },
                { id: 8, name: '科普宣传', time: '2025-08-01' },
                { id: 9, name: '健康义诊', time: '2025-09-01' },
                { id: 10, name: '灾害救援', time: '2025-10-01' }
            ];
            localStorage.setItem('activities', JSON.stringify(activities));
            renderActivities(activities);
        }

        function renderActivities(activities) {
            let activityTable = document.getElementById('activityTable').getElementsByTagName('tbody')[0];
            activityTable.innerHTML = '';
            activities.forEach(activity => {
                let row = activityTable.insertRow();
                row.insertCell(0).textContent = activity.id;
                row.insertCell(1).textContent = activity.name;
                row.insertCell(2).textContent = activity.time;
                let actionsCell = row.insertCell(3);
                actionsCell.innerHTML = `<button class="uk-button uk-button-warning" onclick="openEditActivityModal(${activity.id})">编辑</button>
                                         <button class="uk-button uk-button-danger" onclick="deleteActivity(${activity.id})">删除</button>`;
            });
        }

        function searchActivities() {
            let searchTerm = document.getElementById('activitySearch').value.toLowerCase();
            let activities = JSON.parse(localStorage.getItem('activities'));
            let filteredActivities = activities.filter(activity => {
                return activity.name.toLowerCase().includes(searchTerm);
            });
            renderActivities(filteredActivities);
        }

        function openAddActivityModal() {
            document.getElementById('activityId').value = '';
            document.getElementById('activityName').value = '';
            document.getElementById('activityTime').value = '';
            UIkit.modal('#activityModal').show();
        }

        function openEditActivityModal(id) {
            let activities = JSON.parse(localStorage.getItem('activities'));
            let activity = activities.find(a => a.id === id);
            document.getElementById('activityId').value = activity.id;
            document.getElementById('activityName').value = activity.name;
            document.getElementById('activityTime').value = activity.time;
            UIkit.modal('#activityModal').show();
        }

        function saveActivity() {
            let id = document.getElementById('activityId').value;
            let name = document.getElementById('activityName').value;
            let time = document.getElementById('activityTime').value;
            let activities = JSON.parse(localStorage.getItem('activities'));
            if (id) {
                let index = activities.findIndex(a => a.id === parseInt(id));
                activities[index] = { id: parseInt(id), name, time };
            } else {
                let newId = activities.length > 0 ? Math.max(...activities.map(a => a.id)) + 1 : 1;
                activities.push({ id: newId, name, time });
            }
            localStorage.setItem('activities', JSON.stringify(activities));
            renderActivities(activities);
            UIkit.modal('#activityModal').hide();
        }

        function deleteActivity(id) {
            let activities = JSON.parse(localStorage.getItem('activities'));
            let newActivities = activities.filter(a => a.id !== id);
            localStorage.setItem('activities', JSON.stringify(newActivities));
            renderActivities(newActivities);
        }

        // 报名管理
        function initRegistrations() {
            let registrations = JSON.parse(localStorage.getItem('registrations')) || [
                { id: 1, volunteer: '张三', activity: '环保活动' },
                { id: 2, volunteer: '李四', activity: '敬老活动' },
                { id: 3, volunteer: '王五', activity: '助残活动' },
                { id: 4, volunteer: '赵六', activity: '助学活动' },
                { id: 5, volunteer: '孙七', activity: '公益演出' },
                { id: 6, volunteer: '周八', activity: '社区服务' },
                { id: 7, volunteer: '吴九', activity: '文化传承' },
                { id: 8, volunteer: '郑十', activity: '科普宣传' },
                { id: 9, volunteer: '王十一', activity: '健康义诊' },
                { id: 10, volunteer: '李十二', activity: '灾害救援' }
            ];
            localStorage.setItem('registrations', JSON.stringify(registrations));
            renderRegistrations(registrations);
        }

        function renderRegistrations(registrations) {
            let registrationTable = document.getElementById('registrationTable').getElementsByTagName('tbody')[0];
            registrationTable.innerHTML = '';
            registrations.forEach(registration => {
                let row = registrationTable.insertRow();
                row.insertCell(0).textContent = registration.id;
                row.insertCell(1).textContent = registration.volunteer;
                row.insertCell(2).textContent = registration.activity;
                let actionsCell = row.insertCell(3);
                actionsCell.innerHTML = `<button class="uk-button uk-button-warning" onclick="openEditRegistrationModal(${registration.id})">编辑</button>
                                         <button class="uk-button uk-button-danger" onclick="deleteRegistration(${registration.id})">删除</button>`;
            });
        }

        function searchRegistrations() {
            let searchTerm = document.getElementById('registrationSearch').value.toLowerCase();
            let registrations = JSON.parse(localStorage.getItem('registrations'));
            let filteredRegistrations = registrations.filter(registration => {
                return registration.volunteer.toLowerCase().includes(searchTerm) || registration.activity.toLowerCase().includes(searchTerm);
            });
            renderRegistrations(filteredRegistrations);
        }

        function openAddRegistrationModal() {
            document.getElementById('registrationId').value = '';
            document.getElementById('registrationVolunteer').value = '';
            document.getElementById('registrationActivity').value = '';
            UIkit.modal('#registrationModal').show();
        }

        function openEditRegistrationModal(id) {
            let registrations = JSON.parse(localStorage.getItem('registrations'));
            let registration = registrations.find(r => r.id === id);
            document.getElementById('registrationId').value = registration.id;
            document.getElementById('registrationVolunteer').value = registration.volunteer;
            document.getElementById('registrationActivity').value = registration.activity;
            UIkit.modal('#registrationModal').show();
        }

        function saveRegistration() {
            let id = document.getElementById('registrationId').value;
            let volunteer = document.getElementById('registrationVolunteer').value;
            let activity = document.getElementById('registrationActivity').value;
            let registrations = JSON.parse(localStorage.getItem('registrations'));
            if (id) {
                let index = registrations.findIndex(r => r.id === parseInt(id));
                registrations[index] = { id: parseInt(id), volunteer, activity };
            } else {
                let newId = registrations.length > 0 ? Math.max(...registrations.map(r => r.id)) + 1 : 1;
                registrations.push({ id: newId, volunteer, activity });
            }
            localStorage.setItem('registrations', JSON.stringify(registrations));
            renderRegistrations(registrations);
            UIkit.modal('#registrationModal').hide();
        }

        function deleteRegistration(id) {
            let registrations = JSON.parse(localStorage.getItem('registrations'));
            let newRegistrations = registrations.filter(r => r.id !== id);
            localStorage.setItem('registrations', JSON.stringify(newRegistrations));
            renderRegistrations(newRegistrations);
        }

        // 评价管理
        function initEvaluations() {
            let evaluations = JSON.parse(localStorage.getItem('evaluations')) || [
                { id: 1, volunteer: '张三', content: '表现优秀' },
                { id: 2, volunteer: '李四', content: '认真负责' },
                { id: 3, volunteer: '王五', content: '积极主动' },
                { id: 4, volunteer: '赵六', content: '乐于助人' },
                { id: 5, volunteer: '孙七', content: '团队协作能力强' },
                { id: 6, volunteer: '周八', content: '有创新精神' },
                { id: 7, volunteer: '吴九', content: '服务热情' },
                { id: 8, volunteer: '郑十', content: '工作效率高' },
                { id: 9, volunteer: '王十一', content: '责任心强' },
                { id: 10, volunteer: '李十二', content: '态度端正' }
            ];
            localStorage.setItem('evaluations', JSON.stringify(evaluations));
            renderEvaluations(evaluations);
        }

        function renderEvaluations(evaluations) {
            let evaluationTable = document.getElementById('evaluationTable').getElementsByTagName('tbody')[0];
            evaluationTable.innerHTML = '';
            evaluations.forEach(evaluation => {
                let row = evaluationTable.insertRow();
                row.insertCell(0).textContent = evaluation.id;
                row.insertCell(1).textContent = evaluation.volunteer;
                row.insertCell(2).textContent = evaluation.content;
                let actionsCell = row.insertCell(3);
                actionsCell.innerHTML = `<button class="uk-button uk-button-warning" onclick="openEditEvaluationModal(${evaluation.id})">编辑</button>
                                         <button class="uk-button uk-button-danger" onclick="deleteEvaluation(${evaluation.id})">删除</button>`;
            });
        }

        function searchEvaluations() {
            let searchTerm = document.getElementById('evaluationSearch').value.toLowerCase();
            let evaluations = JSON.parse(localStorage.getItem('evaluations'));
            let filteredEvaluations = evaluations.filter(evaluation => {
                return evaluation.volunteer.toLowerCase().includes(searchTerm) || evaluation.content.toLowerCase().includes(searchTerm);
            });
            renderEvaluations(filteredEvaluations);
        }

        function openAddEvaluationModal() {
            document.getElementById('evaluationId').value = '';
            document.getElementById('evaluationVolunteer').value = '';
            document.getElementById('evaluationContent').value = '';
            UIkit.modal('#evaluationModal').show();
        }

        function openEditEvaluationModal(id) {
            let evaluations = JSON.parse(localStorage.getItem('evaluations'));
            let evaluation = evaluations.find(e => e.id === id);
            document.getElementById('evaluationId').value = evaluation.id;
            document.getElementById('evaluationVolunteer').value = evaluation.volunteer;
            document.getElementById('evaluationContent').value = evaluation.content;
            UIkit.modal('#evaluationModal').show();
        }

        function saveEvaluation() {
            let id = document.getElementById('evaluationId').value;
            let volunteer = document.getElementById('evaluationVolunteer').value;
            let content = document.getElementById('evaluationContent').value;
            let evaluations = JSON.parse(localStorage.getItem('evaluations'));
            if (id) {
                let index = evaluations.findIndex(e => e.id === parseInt(id));
                evaluations[index] = { id: parseInt(id), volunteer, content };
            } else {
                let newId = evaluations.length > 0 ? Math.max(...evaluations.map(e => e.id)) + 1 : 1;
                evaluations.push({ id: newId, volunteer, content });
            }
            localStorage.setItem('evaluations', JSON.stringify(evaluations));
            renderEvaluations(evaluations);
            UIkit.modal('#evaluationModal').hide();
        }

        function deleteEvaluation(id) {
            let evaluations = JSON.parse(localStorage.getItem('evaluations'));
            let newEvaluations = evaluations.filter(e => e.id !== id);
            localStorage.setItem('evaluations', JSON.stringify(newEvaluations));
            renderEvaluations(newEvaluations);
        }

        // 奖励管理
        function initRewards() {
            let rewards = JSON.parse(localStorage.getItem('rewards')) || [
                { id: 1, volunteer: '张三', content: '荣誉证书' },
                { id: 2, volunteer: '李四', content: '奖金' },
                { id: 3, volunteer: '王五', content: '奖杯' },
                { id: 4, volunteer: '赵六', content: '奖牌' },
                { id: 5, volunteer: '孙七', content: '奖品' },
                { id: 6, volunteer: '周八', content: '感谢信' },
                { id: 7, volunteer: '吴九', content: '纪念品' },
                { id: 8, volunteer: '郑十', content: '证书' },
                { id: 9, volunteer: '王十一', content: '奖状' },
                { id: 10, volunteer: '李十二', content: '勋章' }
            ];
            localStorage.setItem('rewards', JSON.stringify(rewards));
            renderRewards(rewards);
        }

        function renderRewards(rewards) {
            let rewardTable = document.getElementById('rewardTable').getElementsByTagName('tbody')[0];
            rewardTable.innerHTML = '';
            rewards.forEach(reward => {
                let row = rewardTable.insertRow();
                row.insertCell(0).textContent = reward.id;
                row.insertCell(1).textContent = reward.volunteer;
                row.insertCell(2).textContent = reward.content;
                let actionsCell = row.insertCell(3);
                actionsCell.innerHTML = `<button class="uk-button uk-button-warning" onclick="openEditRewardModal(${reward.id})">编辑</button>
                                         <button class="uk-button uk-button-danger" onclick="deleteReward(${reward.id})">删除</button>`;
            });
        }

        function searchRewards() {
            let searchTerm = document.getElementById('rewardSearch').value.toLowerCase();
            let rewards = JSON.parse(localStorage.getItem('rewards'));
            let filteredRewards = rewards.filter(reward => {
                return reward.volunteer.toLowerCase().includes(searchTerm) || reward.content.toLowerCase().includes(searchTerm);
            });
            renderRewards(filteredRewards);
        }

        function openAddRewardModal() {
            document.getElementById('rewardId').value = '';
            document.getElementById('rewardVolunteer').value = '';
            document.getElementById('rewardContent').value = '';
            UIkit.modal('#rewardModal').show();
        }

        function openEditRewardModal(id) {
            let rewards = JSON.parse(localStorage.getItem('rewards'));
            let reward = rewards.find(r => r.id === id);
            document.getElementById('rewardId').value = reward.id;
            document.getElementById('rewardVolunteer').value = reward.volunteer;
            document.getElementById('rewardContent').value = reward.content;
            UIkit.modal('#rewardModal').show();
        }

        function saveReward() {
            let id = document.getElementById('rewardId').value;
            let volunteer = document.getElementById('rewardVolunteer').value;
            let content = document.getElementById('rewardContent').value;
            let rewards = JSON.parse(localStorage.getItem('rewards'));
            if (id) {
                let index = rewards.findIndex(r => r.id === parseInt(id));
                rewards[index] = { id: parseInt(id), volunteer, content };
            } else {
                let newId = rewards.length > 0 ? Math.max(...rewards.map(r => r.id)) + 1 : 1;
                rewards.push({ id: newId, volunteer, content });
            }
            localStorage.setItem('rewards', JSON.stringify(rewards));
            renderRewards(rewards);
            UIkit.modal('#rewardModal').hide();
        }

        function deleteReward(id) {
            let rewards = JSON.parse(localStorage.getItem('rewards'));
            let newRewards = rewards.filter(r => r.id !== id);
            localStorage.setItem('rewards', JSON.stringify(newRewards));
            renderRewards(newRewards);
        }

        window.onload = init;
    </script>
</body>

</html>